<template>
  <!--// 设备卡片组件-->
  <div>
    <div class="imgPart">
      <Tooltip :content="dev.iotSpace.name" placement="bottom" theme="light"> <img :src="icon" class="imgStyle" alt=""> </Tooltip>
    </div>
    <div class="textPart" :class="dev.inPool === true?'textPartInPool':'textPart'">
      <h3>{{dev.iotDevType.useType}}</h3>{{dev.inPool}} </div>
  </div>
</template>
<script>
export default {
  name: 'DevCard',
  props: ['dev'],
  created: function () {
    if (this.dev.iotDevType.iconUrl !== null) {
      this.askPic(this.dev.iotDevType.iconUrl)
    }
  },
  data: function () {
    return {
      icon: require('../../assets/default_device.png')
    }
  },
  watch: {
    'dev.inPool': function (newValue, oldValue) {
      this.dev.inPool = newValue
    }
  },
  methods: {
    askPic: function (picUrl) {
      window.myapi.show_pic({ url: picUrl }).then(resp => {
        this.icon = 'data:image/png;base64,' + btoa(new Uint8Array(resp.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      }).catch(info => {
        this.$Notice.warning({
          title: '操作提示',
          desc: info
        })
      }).finally((fin) => {})
    }
  }
}

</script>
<style scoped>
.textPart {
  text-align: center;
  height: 15%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: solid 1px #e9e4e4;
}
.textPartInPool {
  text-align: center;
  height: 15%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: solid 1px #e9e4e4;
  background: #d1f7d6;
}
.imgPart {
  text-align: center;
  height: 85%;
  cursor: pointer;
}
.imgStyle {
  width: 50px;
  height: 50px;
}

</style>
